<template>
  <div width=300>

    <center><h1>登录</h1></center>

    <a-form-item label="用户名" v-bind="formlayout">

      <a-input v-model="username"/>

    </a-form-item>
    <a-form-item label="密码" v-bind="formlayout">
      <a-input-password v-model="password" placeholder="input password" />
    </a-form-item>
        <a-form-item
        v-bind="formlayout"
        label="Captcha"
        extra="We must make sure that your are a human."
        >
        <a-row :gutter="5">
            <a-col :span="8">
            <a-input v-model="num"/>
            </a-col>
            <a-col :span="2">
            <a-button @click="getNum">Get captcha</a-button>
            </a-col>
        </a-row>
    </a-form-item>
    <a-form-item v-bind="buttonlayout">
      <a-button type="primary"  @click="submit">登录</a-button>  <a-icon @click="ding" type="dingding" /> <a-icon @click="gitee" type="github" /> <a-icon @click="facebook" type="facebook" />
    </a-form-item>
  </div>
</template>

<script type="text/javascript">
import { num_get, user_login } from '../axios_send/api';

export default{

  data(){
    return{
      username:"",
      password:'',
      num:'',
      //表单样式
      formlayout:{
        //标签
        labelCol:{
          xs:{span:24},
          sm:{span:8}
        },
        //文本框
        wrapperCol:{
          xs:{span:14},
          sm:{span:6}
        }
      },
      //按钮样式
      buttonlayout:{
        //按钮
        wrapperCol:{
          xs:{
            span:24,
            offset:0
          },
          sm:{span:16,offset:8}
        }
      },
      
    }

  },
  //自定义方法
  methods:{
      getNum(){
          var data = {
              'username':this.username
          }
          num_get(data).then(res=>{
              console.log(res)
          })
      },
      submit(){
          var data = {
              'username':this.username,
              'password':this.password,
              'num':this.num
          }
          user_login(data).then(res=>{
              console.log(res)
              sessionStorage.setItem('username',res.username)
              sessionStorage.setItem('user_id',res.user_id)
              sessionStorage.setItem('token',res.token)
              sessionStorage.setItem('role',res.role)
              this.$router.push({path:'/'})
          })
      },
      ding(){
        window.location.href = "http://localhost:8000/user/ding_url/";
      },
      gitee(){
        window.location.href = "http://localhost:8000/user/gitee_url/";
      },
      facebook(){
        window.location.href = "https://127.0.0.1:8000/static/login.html";
        a = response.authResponse.accessToken
        console.log(a)
      },
  }
};


</script>

<style type="text/css">


</style>
